Um exemplo do poder da CSS
Quando eu em muitas páginas desse site disse que o novo modelo do HTML5 adotado para modelagem de seus elementos via CSS foi uma grande solução para um grande problema não foi exagero algum pelo seu poder e versatilidade.
Eu diria que está página é o primeiro modelo de utilização da CSS que vale apena ser guardado no cantinho do seu baú de ferramentas. É um menu vertical que pode ser inserido em qualquer coluna de uma div com um design muito bom.
É chamado de barra de menu vertical porque é uma lista/conjunto de links de navegação agrupadas em um elemento que encaminharão o usuário a outras páginas do site ou mesmo de sites externos.
Há uma clara vantagem em fazer barras de menus ao invés de exibir links dispersos na página. Fica mais fácil para o usuário
encontrar o que deseja e não exige que o usuário leia tudo da página para encontrar o que quer.
Nota : Se o seu objetivo é fazer o usuário ler toda sua página antes de encontrar o que quer esqueça. O usuário vai fechar
a página ao invés de lê-la.
Nota : Para efeitos didáticos eu desmembrei a solução em passos para que você entenda para que foi feito cada passo.
Utilizei a definição do estilo em partes para cada item no código html.
Então o estilo começa simples e vou agregando itens nele até que fique como queremos
.
Contudo, no final, fornecerei o fonte correto sem os truques usados para o aprendizado.
Menu Vertical
O menu de itens vertical é baseado em uma lista não ordenada de items. Vamos começar declarando uma lista com alguns itens.
Menu Lateral 1
Código:
<h2>Menu Lateral</h2>
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Produtos</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Fale Conosco</a> </li>
<li> <a href="#">Empresa</a> </li>
</ul>
Retirando o formato de uma lista comum - Estilizando o menu
Vamos tirar os estilos padrões da lista : magin e padding e o estilo de lista em sí
Menu Lateral 2
Código:
<style>
.estilodaul {
margin: 0;
padding:0;
list-style-type:none;
}
</style>
Nota : Eu apliquei o estilo numa classe porque não queria que os outros itens de menu lateral a seguir fossem influenciados por um estilo global. Utilizando classe eu aplico o estilo exato aonde eu quero.
Estilizando os itens do nosso menu
Há diversas maneiras de fazer o menu e um dos mais bonitos é com uma cor de fundo e quando o mouse passar sobre ele essa cor de fundo muda. Até a cor das letras pode mudar se o fundo ficar pouco contrastante.
Neste exemplo utilizarei uma imagem de fundo. Se quiser baixar ela está aqui:
Nessa imagem para facilitar a edição utilizei cores simples. Contudo use fontes degradê a aparência do menu ficará bem melhor.
Esta imagem tem largura de 400 pixels e altura de 40 pixels. Meu objetivo é exir apenas os 200 pixels da direita quando está em repouso e os outros 200 pixels da esquerda quando o mouse estiver sobre ela. Vou colocar uma borda azul para delimitar nosso menu para visualizar melhor seus efeitos.
Menu Lateral 3
Código:
.estilodali1 {
width: 200px;
height: 40px;
border : 1px solid blue;
}
Nota : Eu apliquei o estilo estilodali em cada item da lista. Como cada item da lista ocupa toda a largura de seu container
a lista apareceu bonitinho. Mas se você aplicar apenas pela tag poderá precisar dos estilos :
• display:block; - Torna possível definir a largura do elemento já que o ul é um item tipo inline e por esse motivo
a largura de seus itens é determinado por seus caracteres. Este tipo de exibição é fundamental para que possamos definir a largura e
a altura dos elementos.
Menu Lateral 4 - aplicando a imagem de fundo
Código:
<style>
.estilodali2 {
width: 200px;
height: 40px;
border: 1px solid blue;
display: block;
background-image: url('imagens/menu2.png');
}
</style>
Caso a imagem que esteja aplicando seja menor que seu item de lista você poderá precisar do estilo no-repeat para que ela seja exibida apenas uma vez no topo esquerdo do item.
Menu Lateral 5 - aplicando o efeito da cor de fundo
O efeito da mudança da cor de fundo do item é baseado no alinhamento da imagem contra o item que ela está sendo exibida.
Se a imagem estiver sendo alinhada a partir do canto esquerdo da imagem somente a parte laranja-claro aparecerá mas se ela estiver sendo
alinhada com o canto direito do item apenas a parte laranja-escuro dela será exibida.
Código:
.estilodali3:hover {
background-position: right bottom;
}
Agora nosso menu está quase bom. Ao passar o mouse o background-position da imagem é definido como à direita e quando não é exibido o default, à esquerda.
Menu Lateral 5 - Acerto final 1
Vamos colocar a mensagem dos links onde queremos, logo depois da imagem, mais precisamente depois da setinha da imagem .
Usei o estilo text-indent: 40px; para fazer a imagem ficar 40px deslocada da margem esquerda de onde seria a sua normal exibição.
Código:
<style>
.estilodali4 {
width: 200px;
height: 40px;
border: 1px solid blue;
display: block;
background-image: url('imagens/menu2.png');
text-indent: 40px;
}
.estilodali4:hover {
background-position: right bottom;
}
</style>
Menu Lateral 6 - Acerto final 2
Nossos links ainda estão fora de posição. Não estão centralizados verticalmente. Para fazer isso temos que falar para o browser que o link tem um tamanho x e que está dentro de um container y maior. Feito isso o browser alinha pra gente. Veja como fica.
Código:
<style>
.estilodali5 {
width: 200px;
height: 40px;
border: 1px solid blue;
display: block;
background-image: url('imagens/menu2.png');
text-indent: 40px;
line-height:40px;
}
.estilodali5:hover {
background-position: right bottom;
}
</style>
O parâmetro font-size é o tamanho da fonte e a gente usa muito para dimensionar o tamanho das nossas fontes de letras.
O parâmetro line-height é o tamanho da linha no browser. Quando a gente define que o font-size é 15px e o line-height é de
40px o browser alinha o texto no meio do espaço da linha.
Menu Lateral 6 - Acerto final 3
Vamos remover a borda dos itens.
Código:
<style>
.estilodali6 {
width: 200px;
height: 40px;
display: block;
background-image: url('imagens/menu2.png');
text-indent: 40px;
line-height: 40px;
}
.estilodali6:hover {
background-position: right bottom;
}
</style>
Ainda não tá do jeito que eu quero. O link da imagem quase some quando o mouse passa sobre ele e quando o mouse passa sobre o item ele sublinha ele para indicar que é um link. Fazendo o retoque final
Menu Lateral 6 - Retoque final
Código:
<style>
.estilodali7 {
width: 200px;
height: 40px;
display: block;
background-image: url('imagens/menu2.png');
text-indent: 40px;
line-height: 40px;
color:black;
}
.estilodali7:hover {
background-position: right bottom;
text-decoration:none;
}
.estilodali7 a:link {
color: black;
text-decoration: none;
}
.estilodali7 a:hover {
color: white;
text-decoration: none;
}
</style>
Fala a verdade...Ficou um menu vertical da hora né?